<template>
    <div>
        <el-card class="box-card" v-for="(orderFormInfo, index) in ordersList" shadow="always" :key="index">
            <div slot="header" class="clearfix">
                <span>订单{{ index+1 }}</span>
            </div>
            <el-form  label-width="100px" >
                <el-form-item label="订单ID">
                    <el-input v-model="orderFormInfo.orderId" :disabled="true" ></el-input>
                </el-form-item>
                <el-form-item label="所属用户ID">
                    <el-input v-model="orderFormInfo.userId" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="订单名称">
                    <el-input v-model="orderFormInfo.orderName" placeholder="请输入订单名称"></el-input>
                </el-form-item>
                <el-form-item label="订单数量">
                    <el-input v-model="orderFormInfo.orderNumber" placeholder="请输入订单数量" type="number"></el-input>
                </el-form-item>
                <el-form-item label="订单日期">
                    <el-input v-model="orderFormInfo.orderDate" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="danger" @click="deleteOrder(index)" style="margin-top: 10px;" v-if="isCreateState">删除订单</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-button type="primary" @click="createOrder" style="margin-top: 15px;" v-if="isCreateState">新增订单</el-button>
    </div>
</template>
<script>
export default ({
   name: 'orderList',
   props: 
    {
        ordersList:{
            type: Array
        },
        usersId:{
            type: String
        },
        isCreateState:{
            type: Boolean
        }
    },
   data() {
        return {
            isCreate: false,
        }
    },
    methods: {
        createOrder() {
            let orderObj={
                orderId: '',
                userId: this.usersId,
                orderName: '',
                orderNumber: 0,
                orderDate: ''
            }
            this.ordersList.push(orderObj)
            this.$emit('ordersum',this.ordersList)
        },
        deleteOrder(index){
            this.ordersList.splice(index,1)
            this.$emit('deleteOrdersum',this.ordersList)
        }
    },
    mounted() {
        if(this.ordersList.length === 0){ //订单列表没有长度，则为新增，否则就是修改
            this.isCreate = true
        }
    },
})
</script>
<style>

</style>
